<template>
  <div class="editor-frame--viewport">
    <q-button @click="handleEdit">编辑</q-button>
    <SetterPanel></SetterPanel>
  </div>
</template>

<script>
export default {
  name: 'List',
};
</script>

<script setup>
import { getCurrentInstance, shallowRef } from '@vue/composition-api';
import SetterPanel from '@/views/workbench/setter-panel/index.vue';
import { useDocument, useWorkbench } from '@/designer/hooks';
import setters from '@/designer/setters';
import createEngine, { EngineContext } from '@/designer/shared/create-engine';
import { Node } from '@/designer/models/node';

// 引擎注册
const engine = shallowRef(null);
const initEngine = () => {
  engine.value = createEngine({
    setters,
  });
};
initEngine();
provide(EngineContext, engine);

const document = useDocument();
const { proxy } = getCurrentInstance();

// 测试mock
const data = {
  id: 'node_1',
  props: {
    componentId: '视图01',
    viewType: 'xx类',
    size: '3*3',
    title: '',
    desc: '',
    imageId: '1',
    dataType: '2',
    dataSet: 'mockJson',
    isDrillingDown: true,
    refreshFrequency: 10,
    isDesensitization: false,
    desensitizationFields: [
      {
        fieldId: '1',
        ruleId: '1',
      },
    ],
    outputEvents: ['1'],
    inputEvents: ['2'],
  },
  componentName: 'View1',
  componentMeta: {
    componentName: 'View1',
    title: '视图',
    w: 4,
    h: 3,
    imgName: 'view1',
    props: [
      {
        name: 'componentId',
        rules: {
          required: false,
        },
        desc: '组件编号',
        defaultValue: '',
      },
      {
        name: 'viewType',
        desc: '组件类型',
        defaultValue: '视图组件',
      },
      {
        name: 'size',
        propType: {
          required: false,
        },
        desc: '组件尺寸',
        defaultValue: '4*3',
      },
      {
        name: 'title',
        rules: {
          type: 'string',
          required: true,
        },
        desc: '组件标题',
        defaultValue: '',
      },
      {
        name: 'desc',
        rules: {
          required: false,
        },
        desc: '组件描述',
        defaultValue: '',
      },
      {
        name: 'imageId',
        rules: {
          required: false,
        },
        desc: '组件缩略图',
        defaultValue: '1',
      },
      {
        name: 'dataType',
        rules: {
          required: false,
        },
        desc: '取数类型',
        defaultValue: '请选择',
      },
      {
        name: 'dataSet',
        rules: {
          required: false,
        },
        desc: '数据配置',
        defaultValue: '',
      },
      {
        name: 'isDrillingDown',
        rules: {
          required: false,
        },
        desc: '是否支持下钻',
        defaultValue: false,
      },
      {
        name: 'refreshFrequency',
        rules: {
          required: false,
        },
        desc: '数据刷新频率',
        defaultValue: 60,
      },
      {
        name: 'isDesensitization',
        rules: {
          required: false,
        },
        desc: '脱敏配置',
        defaultValue: false,
      },
      {
        name: 'desensitizationFields',
        rules: {
          required: false,
        },
        desc: '脱敏字段',
        defaultValue: [
          {
            fieldId: '1',
            ruleId: '1',
          },
        ],
      },
      {
        name: 'outputEvents',
        rules: {
          required: false,
        },
        desc: '可输出事件',
        defaultValue: [],
      },
      {
        name: 'inputEvents',
        rules: {
          required: false,
        },
        desc: '可输入事件',
        defaultValue: [],
      },
    ],
    configure: {
      basicProps: {
        title: '组件基本信息',
        override: [
          {
            name: 'componentId',
            setter: 'StringSetter',
          },
          {
            name: 'viewType',
            setter: 'StringSetter',
          },
          {
            name: 'size',
            setter: 'StringSetter',
          },
          {
            name: 'title',
            setter: 'InputSetter',
          },
          {
            name: 'desc',
            setter: {
              componentName: 'InputSetter',
              props: {
                maxlength: 500,
                type: 'textarea',
              },
            },
          },
          {
            name: 'imageId',
            setter: {
              componentName: 'UploadSetter',
            },
          },
        ],
      },
      commonProps: {
        title: '组件通用属性',
        override: [
          {
            name: 'dataType',
            setter: {
              componentName: 'SelectSetter',
              props: {
                options: [
                  {
                    label: '真实数据',
                    id: '1',
                  },
                  {
                    label: '静态数据',
                    id: '2',
                  },
                ],
              },
            },
          },
          {
            name: 'dataSet',
            setter: 'EventSetter',
          },
          {
            name: 'isDrillingDown',
            setter: 'BooleanSetter',
          },
          {
            name: 'refreshFrequency',
            setter: {
              componentName: 'NumberSetter',
              props: {
                text: '分钟刷新一次',
              },
            },
          },
          {
            name: 'isDesensitization',
            setter: 'BooleanSetter',
          },
          {
            name: 'desensitizationFields',
            setter: 'DesensitizationFieldSetter',
          },
          {
            name: 'outputEvents',
            setter: {
              componentName: 'CheckboxSetter',
              props: {
                options: [
                  {
                    label: '资产类型',
                    value: '1',
                  },
                  {
                    label: '告警类型',
                    value: '2',
                  },
                  {
                    label: '单位',
                    value: '3',
                  },
                ],
              },
            },
          },
          {
            name: 'inputEvents',
            setter: {
              componentName: 'CheckboxSetter',
              props: {
                options: [
                  {
                    label: '资产类型',
                    value: '1',
                  },
                  {
                    label: '告警类型',
                    value: '2',
                  },
                  {
                    label: '单位',
                    value: '3',
                  },
                ],
              },
            },
          },
        ],
      },
    },
  },
  type: 'view',
  w: 4,
  h: 3,
  x: 0,
  y: 1,
};

const handleEdit = () => {
  console.log(new Node(data));
  document.value.setSelection(new Node(data));
};
</script>

<style lang="scss" scoped>
.editor-frame--viewport {
  height: 100%;
  overflow: auto;
}
</style>
